import React from 'react';
import { Card, List, Tag, Button, Breadcrumb, Tabs, Space } from 'antd';
import { HomeOutlined, BellOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import MainLayout from '../../components/MainLayout';
import styles from './Message.module.less';

interface MessageItem {
  id: string;
  title: string;
  content: string;
  type: string;
  time: string;
  status: 'unread' | 'read';
}

const Message: React.FC = () => {
  const data: MessageItem[] = [
    {
      id: '1',
      title: '您有一个预验收申请待处理',
      content: '示范区档案管理项目提交了预验收申请，请及时处理。',
      type: '验收通知',
      time: '2024-03-15 10:30',
      status: 'unread'
    },
    // ... 更多数据
  ];

  const tabItems = [
    {
      key: 'all',
      label: '全部消息',
      children: (
        <List
          className={styles.messageList}
          itemLayout="horizontal"
          dataSource={data}
          renderItem={(item) => (
            <List.Item
              actions={[
                item.status === 'unread' && <Button type="link">标记已读</Button>
              ].filter(Boolean)}
            >
              <List.Item.Meta
                title={
                  <Space>
                    <span>{item.title}</span>
                    {item.status === 'unread' && <Tag color="red">未读</Tag>}
                  </Space>
                }
                description={
                  <div className={styles.messageContent}>
                    <p>{item.content}</p>
                    <div className={styles.messageFooter}>
                      <Tag color="blue">{item.type}</Tag>
                      <span className={styles.messageTime}>{item.time}</span>
                    </div>
                  </div>
                }
              />
            </List.Item>
          )}
          pagination={{
            pageSize: 10,
            showTotal: total => `共 ${total} 条`,
            showQuickJumper: true
          }}
        />
      )
    },
    {
      key: 'unread',
      label: '未读消息',
      children: '未读消息列表'
    }
  ];

  return (
    <MainLayout>
      <div className={styles.breadcrumb}>
        <Breadcrumb items={[
          {
            title: <Link to="/home"><HomeOutlined /> 首页</Link>,
          },
          {
            title: '消息中心',
          }
        ]} />
      </div>

      <Card 
        title={
          <Space>
            <BellOutlined className={styles.icon} />
            <span>消息中心</span>
          </Space>
        }
        className={styles.messageCard}
        extra={
          <Space>
            <Button>全部标记已读</Button>
            <Button type="primary">清空已读消息</Button>
          </Space>
        }
      >
        <Tabs items={tabItems} />
      </Card>
    </MainLayout>
  );
};

export default Message; 